<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>homework1</title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			.container{
				width: 100vw;
				height: 100vh;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		canvas{
			width: 520px;
			height: 520px;
			border: 10px solid #333333;
		}	
		
		</style>
	</head>
	<body>
		<div class="container">
		<canvas id="canvas" width="520" height="520"></canvas>
		</div>
	</body>
	<script>
		window.onload = function() {
			let oCanvas = document.getElementById('canvas');
			
			console.dir(oCanvas)
			let oPen=oCanvas.getContext("2d");
			
			oPen.beginPath();
			oPen.lineWidth=40;
			
			oPen.strokeStyle="aqua"
			
			
			oPen.moveTo(326,80);
			oPen.lineTo(424,180);
			
			oPen.moveTo(340,100);
			oPen.lineTo(340,440);
			
			oPen.moveTo(354,80);
			oPen.lineTo(256,180);
			
			oPen.moveTo(166,440);
			oPen.lineTo(266,340);
			
			oPen.moveTo(194,440);
			oPen.lineTo(94,340);
			
			oPen.moveTo(180,420);
			oPen.lineTo(180,80);
			oPen.stroke();
			
		}
	</script>
</html>
